<template>
<div class="chart-container">
    <!-- <el-button-group class="tabchange">
        <el-button type="text" size="mini" class="tabtext1">城市</el-button>
        <el-button type="text" size="mini" class="tabtext2">县级</el-button>
    </el-button-group> -->
  <span @click="tabFunc(index)" v-for="(iden, index) in idens" :class="curIndex == index ? 'active' : ''" class="tabtext">{{iden}}</span> 
  <div class="right-middle-map com_echarts" id="right-middle-map">
  </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'right-middle-map',
  data () {
    return {
        id:"right-middle-map",
        idens:['县级','城市'],
        curIndex: 1
    }
  },
  created () {

  },
  mounted(){
      this.initMap(1);
  },
  methods:{
      tabFunc(num){
        this.curIndex=num;
        this.initMap(num);
    },
    initMap(num){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));
        var colorline,colorbar,shadowColor,title
        var dataline = [35, 43, 35, 49, 40, 34, 37]
        var databar = [18, 38, 12, 15, 20, 22, 17]
        if(num==1){
            colorline = '#38E0BF'
            colorbar = '#0ec1ff'
            title = '城市公立医院人均住院费用及增长率'
            shadowColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(24,214,214,0.7)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,0,0, 0)'
                            }
                        ], false)
        }
        if(num==0){
            colorline = '#ff9080'
            colorbar = '#ff9080'
            title = '县级公立医院人均住院费用及增长率'
            shadowColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#a27a24'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,0,0, 0)'
                            }
                        ], false)
        }
        var args = {
            title: title,
            legendata:['增长率' ,'次均门诊费用'],
            xAxisdata:['1月', '2月', '3月', '4月', '5月', '6月', '7月', ],
            series:[{
                name: '增长率',
                type: 'line',
                yAxisIndex: 1,
                // smooth: true, //是否平滑曲线显示
                showAllSymbol: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: colorline, // 线条颜色
                    },
                    // borderColor: '#f0f'
                },
                label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#c49225",

                    }
                },
                tooltip: {
                    show: false
                },
                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: shadowColor,
                        shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                data: dataline
            }, {
                name: '次均门诊费用',
                type: 'bar',
                barWidth: 20,
                yAxisIndex: 0,
                tooltip: {
                    show: false
                },
                label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    normal: {
                        color: colorbar
                    }
                },
                data: databar
            }]
        };
        var option = echartsrender.lineandbar(args);
        myChart.setOption(option);
    },
    randomData() {
        return Math.round(Math.random()*1000);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
    .tabtext{
    font-size: 12px;
    color: #409EFF;
    padding: 2px 10px;
    border: 1px solid #409EFF;
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
    position: relative;
    float: right;
    top: 20px;
    z-index: 9999;
}
.active{
    background-color: #409EFF;
    color: #000
}
.right-middle-map{
    height: 27vh;
}
</style>
